<!--HTML-->
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <!-- Favicon icon -->
    <link rel="icon" type="image/png" sizes="16x16" href="${ctxStatic}/xtreme-admin/assets/images/favicon.png">
    <title>JeeGit企业级快速开发平台-JeeSite视频教程,JeeSite小程序研发教程,SpringBoot视频教程,SpringCloud视频教程,Redis视频教程,Flowable视频教程</title>
    <!-- Custom CSS -->
    <style type="text/css">.carousel-inner img {

    }</style>


    <!-- Custom CSS -->
    <link href="${ctxStatic}/xtreme-admin/dist/css/style.min.css" rel="stylesheet">
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="http://static.jeegit.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="http://static.jeegit.com/libs/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->
</head>

<body>
<!-- ============================================================== -->
<!-- Preloader - style you can find in spinners.css -->
<!-- ============================================================== -->
<div class="preloader">
    <div class="lds-ripple">
        <div class="lds-pos"></div>
        <div class="lds-pos"></div>
    </div>
</div>
<!-- ============================================================== -->
<!-- Main wrapper - style you can find in pages.scss -->
<!-- ============================================================== -->
<div id="main-wrapper">


   <% include("global/header.html",{title:"导航"}){} %>







    <!-- ============================================================== -->
    <!-- Page wrapper  -->
    <!-- ============================================================== -->
    <div class="page-wrapper">


        <div class="page-breadcrumb">
            <div class="row">
                <div class="col-5 align-self-center">
                    <h4 class="page-title">JeeGit学院</h4>
                    <div class="d-flex align-items-center">
                        <nav aria-label="breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="http://www.jeegit.com/">首页</a></li>
                                <li class="breadcrumb-item active" aria-current="page">课程列表</li>
                            </ol>
                        </nav>
                    </div>
                </div>
                <div class="col-7 align-self-center">
                    <div class="d-flex no-block justify-content-end align-items-center">
                        <div class="m-r-10">
                            <div class="lastmonth"></div>
                        </div>
                        <div class="">
                            <small>累计学习</small>
                            <h4 class="text-info m-b-0 font-medium">999999人</h4></div>
                    </div>
                </div>
            </div>
        </div>



<#form:form id="searchForm" model="${mediaCourse}" action="${ctx}/list.html" method="post" class="container-fluid "
					data-page-no="${parameter.pageNo}" data-page-size="${parameter.pageSize}" data-order-by="${parameter.orderBy}">
        	
				
			
        <div class="bg-light d-flex align-items-center do-block"><span class=" m-r-15 m-t-15 m-b-15">课程类型</span>
            <ul class="nav nav-pills m-t-15 m-b-15">
                <li class="nav-item"> <a  class="nav-link active btn  waves-light  active" onclick="binSearch(this)" data-toggle="tab" >全部</a> </li>
                <li class="nav-item"> <a  class="nav-link btn waves-effect waves-light" onclick="binSearch(this)" data-toggle="tab" >前端</a> </li>
                <li class="nav-item"> <a class="nav-link btn waves-effect waves-light " onclick="binSearch(this)" data-toggle="tab" >后台</a> </li>
                <li class="nav-item"> <a class="nav-link btn waves-effect waves-light " onclick="binSearch(this)" data-toggle="tab" >测试</a> </li>
                <li class="nav-item"> <a class="nav-link btn waves-effect waves-light " onclick="binSearch(this)" data-toggle="tab" >部署/运维</a> </li>
                <li class="nav-item"> <a class="nav-link btn waves-effect waves-light " onclick="binSearch(this)" data-toggle="tab" >数据库</a> </li>
                <li class="nav-item"> <a class="nav-link btn waves-effect waves-light " onclick="binSearch(this)" data-toggle="tab" >开源框架</a> </li>
            </ul>

        </div>
            <div class="bg-light d-flex align-items-center do-block"><span class=" m-r-15 m-t-15 m-b-15">会员类型</span>
                <ul class="nav nav-pills  m-t-15 m-b-15">
                    <li class=" nav-item"> <a  class="nav-link active btn  waves-light  active" onclick="binSearch(this)"  data-toggle="tab" >全部</a> </li>
                    <li class="nav-item"> <a  class="nav-link btn waves-effect waves-light" onclick="binSearch(this)"  data-toggle="tab" >免费</a> </li>
                    <li class="nav-item"> <a class="nav-link btn waves-effect waves-light "  onclick="binSearch(this)"  data-toggle="tab" >普通会员</a> </li>
                    <li class="nav-item"> <a class="nav-link btn waves-effect waves-light " onclick="binSearch(this)"  data-toggle="tab" >银牌会员</a> </li>
                    <li class="nav-item"> <a class="nav-link btn waves-effect waves-light " onclick="binSearch(this)"  data-toggle="tab" >金牌会员</a> </li>
                    <li class="nav-item"> <a class="nav-link btn waves-effect waves-light " onclick="binSearch(this)"  data-toggle="tab" >付费</a> </li>

                </ul>
            </div>
            <div class="bg-light d-flex align-items-center do-block"><span class=" m-r-15 m-t-15 m-b-15">排序类型</span>
                <ul class="nav nav-pills  m-t-15 m-b-15">
                    <li class=" nav-item"> <a  class="nav-link active btn  waves-light  active"  onclick="binSearch(this)"  data-toggle="tab" >默认</a> </li>
                    <li class="nav-item"> <a  class="nav-link btn waves-effect waves-light"  onclick="binSearch(this)"  data-toggle="tab" >最新</a> </li>
                    <li class="nav-item"> <a class="nav-link btn waves-effect waves-light " onclick="binSearch(this)"  data-toggle="tab" >学习人数</a> </li>
                    <li class="nav-item"> <a class="nav-link btn waves-effect waves-light " onclick="binSearch(this)"  data-toggle="tab" >播放次数</a> </li>
                    <li class="nav-item"> <a class="nav-link btn waves-effect waves-light " onclick="binSearch(this)"  data-toggle="tab" >综合</a> </li>
                    <li class="nav-item"> <a class="nav-link btn waves-effect waves-light " onclick="binSearch(this)"  data-toggle="tab" >好评</a> </li>

                </ul>
            </div>
 

			</#form:form>






        <!-- ============================================================== -->
        <!-- Bread crumb and right sidebar toggle -->
        <!-- ============================================================== -->

        <!-- ============================================================== -->
        <!-- End Bread crumb and right sidebar toggle -->
        <!-- ============================================================== -->
        <!-- ============================================================== -->
        <!-- Container fluid  -->
        <!-- ============================================================== -->
        <div class="container-fluid " style="min-height:450px;">
            <div class="row el-element-overlay">
             <% for(mediaCourse in page.list){ %>
            
            
                <div class="col-lg-3 col-md-6">
                    <div class="card">
                        <div class="el-card-item">
                            <div class="el-card-avatar el-overlay-1"><img src="${mediaCourse.firstImage}"
                                                                          alt="user"/>
                                <div class="el-overlay">
                                    <ul class="list-style-none el-info">
                                        <li class="el-item"><a
                                                class="btn default btn-outline image-popup-vertical-fit el-link"
                                                href="${mediaCourse.firstImage}"><i
                                                class="icon-magnifier"></i></a></li>
                                        <li class="el-item"><a class="btn default btn-outline el-link" href="view.html?id=${mediaCourse.id}"><i class="icon-link"></i></a>
                                        </li>
                                         <li class="el-item"><a class="btn default btn-outline el-link" href="buy.html?id=${mediaCourse.id}"><i class="ti-shopping-cart"></i></a></li>
                                    </ul>
                                </div>
                            </div>

                            <div class="d-flex no-block align-items-center">
                                <div class="m-l-15" style="width: 100%">
                                    <h5 class="m-b-0">${mediaCourse.title}</h5>
                                    <br/>
                                    <span class="text-muted">${parseLong(mediaCourse.studyNumber)}人学习</span>
                                    <span class="text-primary m-r-15" style="float: right">￥${mediaCourse.price}</span>

                                </div>

                            </div>

                        </div>
                    </div>
                </div>
                
              <% } %>
         

            </div>






            <div class="row ">
                <div class="col-sm-12 col-md-5">


                        <span class="text-primary"><a href="#">共计：${page.count}个结果</a></span>

                </div>
                <div class="col-sm-12 col-md-7 d-flex no-block justify-content-end align-items-center">
                    <nav aria-label="Page navigation example">
                        <ul class="pagination">
                            <li class="page-item"><a class="page-link" href="javascript:void(0)">首页</a></li>
                            <li class="page-item"><a class="page-link" href="javascript:void(0)">上一页</a></li>
                            <li class="page-item"><a class="page-link" href="javascript:void(0)">1</a></li>
                 
                            <li class="page-item"><a class="page-link" href="javascript:void(0)">下一页</a></li>
                            <li class="page-item"><a class="page-link" href="javascript:void(0)">尾页</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
        <!-- ============================================================== -->
        <!-- End Container fluid  -->

        <!-- ============================================================== -->
        <!-- ============================================================== -->


        <!-- ============================================================== -->
        <!-- ============================================================== -->
        <!-- ============================================================== -->
        <!-- ============================================================== -->
        <!-- footer -->
        <!-- ============================================================== -->
                
         <% include("global/footer.html",{title:"底部"}){} %>
        <!-- ============================================================== -->
        <!-- End footer -->
        <!-- ============================================================== -->
    </div>
    <!-- ============================================================== -->
    <!-- End Page wrapper  -->
    <!-- ============================================================== -->
</div>
<!-- ============================================================== -->
<!-- End Wrapper -->
<!-- ============================================================== -->
<!-- ============================================================== -->
<!-- customizer Panel -->
<!-- ============================================================== -->

<!-- ============================================================== -->
<!-- All Jquery -->
<!-- ============================================================== -->
<script src="${ctxStatic}/xtreme-admin/assets/libs/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap tether Core JavaScript -->
<script src="${ctxStatic}/xtreme-admin/assets/libs/popper.js/dist/umd/popper.min.js"></script>
<script src="${ctxStatic}/xtreme-admin/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- apps -->
<script src="${ctxStatic}/xtreme-admin/dist/js/app.min.js"></script>
<script src="${ctxStatic}/xtreme-admin/dist/js/app.init.horizontal.js"></script>
<script src="${ctxStatic}/xtreme-admin/dist/js/app-style-switcher.horizontal.js"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<script src="${ctxStatic}/xtreme-admin/assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js"></script>
<script src="${ctxStatic}/xtreme-admin/assets/extra-libs/sparkline/sparkline.js"></script>
<!--Wave Effects -->
<script src="${ctxStatic}/xtreme-admin/dist/js/waves.js"></script>
<!--Menu sidebar -->
<script src="${ctxStatic}/xtreme-admin/dist/js/sidebarmenu.js"></script>
<!--Custom JavaScript -->
<script src="${ctxStatic}/xtreme-admin/dist/js/custom.min.js"></script>
<!--This page JavaScript -->

<!--c3 charts -->
<script src="${ctxStatic}/xtreme-admin/assets/extra-libs/c3/d3.min.js"></script>
<script src="${ctxStatic}/xtreme-admin/assets/extra-libs/c3/c3.min.js"></script>
<link href="${ctxStatic}/xtreme-admin/assets/libs/magnific-popup/dist/magnific-popup.css" rel="stylesheet">
<script src="${ctxStatic}/xtreme-admin/assets/libs/magnific-popup/dist/jquery.magnific-popup.min.js"></script>
<script src="${ctxStatic}/xtreme-admin/assets/libs/magnific-popup/meg.init.js"></script>
<link href="${ctxStatic}/xtreme-admin/assets/libs/toastr/build/toastr.min.css" rel="stylesheet">
<script src="${ctxStatic}/xtreme-admin/assets/libs/toastr/build/toastr.min.js"></script>
<script >

    function binSearch(obj){
        toastr.options = {
            "closeButton": false,
            "debug": false,
            "newestOnTop": false,
            "progressBar": false,
            "rtl": false,
            "positionClass": "toast-bottom-right",
            "preventDuplicates": false,
            "onclick": null,
            "showDuration": 300,
            "hideDuration": 1000,
            "timeOut": 5000,
            "extendedTimeOut": 1000,
            "showEasing": "swing",
            "hideEasing": "linear",
            "showMethod": "fadeIn",
            "hideMethod": "fadeOut"
        }
        toastr["success"]("您点击了按钮:"+obj.innerText, "温馨提示");
    }


</script>
</body>

</html>